<template>
	<view class="main">
<!-- 	<u-navbar
		
		bgColor="transparent"
		@leftClick="back"
	>
	</u-navbar> -->
		<view class="mine-headr">
			<view style="height: 122rpx;"></view>
			<u-icon name="arrow-left" color="#000"  size="22" style="margin-left: 30rpx;" @click="toback"></u-icon>
			<view class="mine-headr-info">
				<view class="mine-headr-info-avatar">
					<u-avatar size="60" :src="base.portrait" ></u-avatar>
				</view>
				<view class="mine-headr-info-text">
					<view class="mine-headr-info-text-name">
						<text v-if="base.company">{{base.company.length>11 ? base.company.slice(0,11)+'...' : base.company}}</text>
					</view>
				    <view class="mine-headr-info-text-qkl">
				    	<text class="u-line-1">区块链地址：{{base.address|yingcang}}</text>
				    	<view class="copy" @tap.stop="copy">
								<image src="@/static/images/info/copy.png" style="margin-left: 16rpx;width: 32rpx;height: 32rpx;" mode=""></image>
						</view>
				    </view>
				</view>
			</view>
			
		</view>
		<!-- <view class="mine-tab">
			<view @click="toPages(item.url,index)"  :style="index!==2?'border-right: 2px solid #F5F9FF; ':''" class="mine-tab-item" v-for="(item , index) in tabslist" :key="index">
				<image :src="item.img" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view> -->
		<view class="collect">
			<view class="tf-Box-Bg">
				<view class="title_box">
					<view class="title">
		
						<u-tabs style="margin-left: 20rpx;" inactiveStyle="color:#A1A1AB"  :list="tabList" @change="checked"></u-tabs>
					</view>
				</view>
			</view>
			
			<!-- 全部  不需要显示 -->
		 <scroll-view  scroll-y="true" @scrolltolower="scrolltolower" class="collect-list">
			<!-- 我的藏品 -->
			<view v-if="active==0 || active == 1">
				<view class="cont">
					<!-- <block  :key="i"> -->
						<view class="cont-list" v-for="(l,i) in list" :key="i"  @click="toPages(l)">
							<view class="cont-list-shopImg">
								<u--image :src="l.thumb" :lazy-load="true" mode="aspectFill" :fade="true" duration="450" width='100%' height="400rpx"></u--image>
							    <view class="hecheng" v-if="l.synthes_status == 1 ">
									<text>可合成</text>
								</view>
							</view>
							<view class="cont-list-shopInfo">
								<view class="cont-list-shopInfo-name">
									<text>{{l.title}}</text>
								</view>
								<view class="cont-list-shopInfo-price">
									<text>￥</text>
									<text>43.99</text>
								</view>
							</view>
							<view class="cont-list-status">
								<!-- <view class="cont-list-status-hecheng">
									<text>合成中…</text>
								</view> -->
								<view class="cont-list-status-num">
									<text>共{{active===0?l.goods_special_num:l.blindbox_count}}个</text>
									<view class="boder" v-if="l.resale_num>=1"></view>
									<text v-if="l.resale_num>=1">{{l.resale_num}}个寄售中</text>
								</view>
							</view>
						</view>
				</view>
				<block v-if="total<1&&active === 0">
					<Empty text="暂无藏品"></Empty>
				</block>
				<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
					已经到底了
				</view>
				<view class="Isend" @click="myGoodsList" v-else-if="list.length<this.total">
					下拉加载更多
				</view>
			</view>
			<!-- 我的盲盒 -->
			<!-- <view v-if="active==1" class="box">
				<view class="item" @click="lookbox(item.id,item)" v-for="(item,i) in list" :key="i">
					<view class="ts">盲盒未拆</view>
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="item_top">{{item.title}}</view>
					<view class="item_bottom">内有{{item.blindbox_count}}款藏品</view>
				</view>
			</view> -->
			<block v-if="active === 2">
				<Empty text="暂无数据"></Empty>
			</block>
			<block v-if="active === 3">
				<Empty text="暂无数据"></Empty>
			</block>
			<block v-if="total<1&&active === 1">
				<Empty text="暂无盲盒"></Empty>
			</block>
		  </scroll-view>
		</view>
		<!-- <view class="header">
			<view class="header-info">
				<u-avatar :src="base.portrait" size="62"></u-avatar>
				<view class="header-info-name">{{base.company}}</view>
			</view>
			<view class="header-goods">
				<view class="header-goods-item">
					{{base.goods_count||0}}<text> 在售</text>
				</view>
				<view class="header-goods-item">
					{{base.sale_goods_count||0}}<text> 售出</text>
				</view>
			</view>
			<view class="header-introduce">
				<u-parse :content="base.company_int||'作者简介'"></u-parse>
			</view>
		</view> -->
		<!-- <view class="tags">
			<u-tabs :activeStyle="{color:'#101010',fontSize:'28rpx',fontWeight:'800'}"
				:inactiveStyle="{color:'#A1A1AB',fontSize:'28rpx',fontWeight:'block'}" lineColor="#FFFFFF"
				@change="changeTab" :list="tags"></u-tabs>
		</view> -->
		<!-- <view class="collection fadeInUp" v-if="!haveSwitch || (userInfo.mobile === base.contact_phone)">
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(item , i) in list" :key="i">
					<view class="collection-item" >
						<view class="collection-item-image">
							<view class="ts">{{type==0?'藏品':'盲盒'}}</view>
							<image :src="item.thumb" mode="aspectFill"></image>
							<view class="collection-item-image-tags">
								<text class="txt">{{item.goods_special_type_name||'盲盒'}}</text>
								<text class="txt">艺术</text>
							</view>
						</view>
						<view class="collection-item-info">
							<view class="collection-item-info-title u-line-1">
								{{item.title}}
							</view>
							<view class="info u-label" v-if="type==0">
								#{{item.goodsCode+'/'+item.allCount}}
							</view>
							<view class="collection-item-info-btm">
								<view class="collection-item-info-btm-left">
									<u-avatar :src="base.portrait" size="20"></u-avatar>
									<view class="collection-item-info-btm-left-name u-line-1">
										{{base.company}}
									</view>
								</view>
								<view class="collection-item-info-btm-right">
									¥{{item.special_base_price||item.base_price}}
								</view>
							</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
			<block>
				<block v-if="!loading&&list.length<1">
					<Empty :text="type==1?'暂无盲盒':'暂无藏品'"></Empty>
				</block>
				<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
					已经到底了
				</view>
				<view class="Isend" @click="getList" v-else-if="list.length<this.total">
					下拉加载更多
				</view>
			</block>

		</view> -->

	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				tags: [{
						name: '藏品'
					},
					// {
					// 	name: '盲盒'
					// },
				],
				base: '',
				page: 1,
				list: [],
				type: 0,
				scrollTop: 0,
				loading: false,
				iconStyle: {
					color: '#FFFFFF'
				},
				customStyles: {
					width: '50rpx',
					background: '#000000',
					right: '0',
					position: 'absolute'
				},
				active:0,
				haveSwitch: false,
				tabList: [
					{name: '藏品'},
					{name: '盲盒'},
					{name:'元宇宙'},
					{name:'已发布'}
				],
				total:0,
				type:1  //1藏品  2盲盒
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(op) {
			this.id = op.id
		},
		filters: {
			yingcang(val) {
				if (val) {
					let a = val.replace(/(\w{4})\w+(\w{4})/, "$1...$2");
					return a;
				} else {
					return "...";
				}
			},
		},
		onShow() {
			this.getuinfo()
			this.getList(),
			this.haveSwitch = uni.getStorageSync('haveSwitch')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getuinfo()
			this.getList(0)
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page += 1
				this.getList()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async getuinfo() {
				let data = await this.$http({
					url: this.$api.CreatorInfo,
					method: 'GET',
					hideLoading: true,
					data: {
						mer_id: this.id,
					}
				})
				if (data.code == 200) {
					this.base = data.data
				}
			},
			changeTab(e) {
				this.page = 1
				this.type = e.index
				this.getList()
			},
			scrolltolower(){
				this.page+=1
				this.getList()
				// console.log(11)
			},
			async getList() {
				let data = await this.$http({
					url: this.type == 1 ? this.$api.CreatorGoodsList :this.$api.CreatorBlindboxList ,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: 10,
						mer_id: this.id,
						type:this.type
					}
				})
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					this.total = data.data.total
					this.list = this.list.concat(data.data.data)
				}

			},
			checked(e) {
				this.active = e.index;
				this.list= []
				// localStorage.setItem('active',e);
				if (e.index == 0) {
					this.page = 1
					this.type=1
					this.getList()
					
					// this.myGoodsList();
				}else if(e.index==1){
					this.page = 1
					this.type=2
					this.getList()
					// this.mymangGoodsList();
				} else {
					this.page = 1;
					// this.page1 = 1;
				} 
			},
			toPages(l){
				if(this.active===0){
					this.toPage('/subpage/Product/details?id=' + l.special_id);
				}else{
					this.toPage('/subpage/Product/boxDetails?id=' + l.special_id+'&type=2');
				}
				
			},
			copy() {
				uni.setClipboardData({
					data: this.userInfo.account_address,
					showToast: false,
					success: () => {
						console.log('success');
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			toback(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	// /deep/.u-mode-center-box
	/deep/.u-popup__content[data-v-52d4ddd1] {
		background-color: transparent !important;
	}
	
	.Isend {
		font-size: 28rpx;
		font-weight: 400;
		color: #808080;
		line-height: 36rpx;
		text-align: center;
		margin: 16rpx;
	}
	.heard-img{
	
	}
	.mine {
		background-color: #F6FAFF;
		padding-top: 122rpx;
		&-headr{
			width: 100vw;
			height: 363rpx;
			background-image: url('@/static/images/login/hisHeader.png');
			background-size: 100% 100%;
			
		 //    &-setup{
			// 	width: 64rpx;
			// 	height: 64rpx;
			// 	float: right;
			// 	margin: 128rpx 48rpx 0 0;
			// 	image{
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }
			&-info{
				margin-left: 44rpx;
				display: flex;
				align-items: center;
				margin-top: 36rpx;
				&-text{
					margin-left: 28rpx;
					&-name{
						font-size: 40rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #101010;
					}
					&-qkl{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777E90;
						display: flex;
						&-copy {
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 4rpx;
							margin-left: 12rpx;
							background: url(@/static/images/share/fz.png)center/cover no-repeat;
						}
					}
				}
			}
		}
		&-tab{
			width: calc(100vw - 60rpx);
			height: 108rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			margin: auto;
			margin-top: -40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&-item{
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image{
					width: 48rpx;
					height: 48rpx;
				}
				text{
					margin-left: 14rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
				}
			}
		}
	    
	
		.mine_top_top_right {
			
		
			display:flex;
			justify-content: flex-end;
	
			margin-top: -20rpx;
			image {
				margin: 40rpx 48rpx 0 0;
				width: 64rpx;
				height: 64rpx;
				// margin-right: 30rpx;
			}
		}
	
		.show {
			// height: 735rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			background: transparent;
	
			.show_top {
				width: 634rpx;
				height: 715rpx;
				background: #FFF;
				border-radius: 20rpx;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				display: flex;
				padding: 20rpx;
	
				.show_title1 {
					font-size: 38rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #F2CAA6;
					line-height: 36rpx;
					margin-bottom: 31rpx;
					margin-top: 30rpx;
				}
	
				.show_title {
					font-size: 56rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;
	
				}
	
				.showimg {
					width: 314rpx;
					height: 314rpx;
					background: #FFFFFF;
					border-radius: 50rpx;
					margin: 51rpx 0 34rpx 0;
				}
	
				.show_but {
					width: 273rpx;
					height: 74rpx;
					background: #000;
					color: #FFF;
					border-radius: 37rpx;
					text-align: center;
					line-height: 74rpx;
				}
	
				.show_tip {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;
					line-height: 18px;
					margin-top: 48rpx;
				}
			}
	
			.show_close {
				margin-top: 26rpx;
				width: 58rpx;
				height: 59rpx;
	
				image {
					// width: 58rpx;
					// height: 59rpx;
					// background:pink;
					// margin:0 auto;
					width: 100%;
					height: 100%;
	
				}
			}
		}
	
		.userinfo {
			position: relative;
			padding: 30rpx;
			// background-color: #222222;
			background: linear-gradient(181deg, #EBF0F8 0%, #F7F8FA 100%);
			height: 450rpx;
			align-items: flex-start;
	
			// background:linear-gradient(130deg, #33373A 0%, #1E2020 100%, 100%);
			// background:linear-gradient(130deg, #292c2d 0%,#202222 100%);
			.user {
				margin-top: 80rpx;
				margin-left: 20rpx;
	
				.u-avatar {
					border: 4rpx solid #fff;
				}
	
				.cont {
					margin-left: 26rpx;
	
					.name {
						font-size: 40rpx;
						font-weight: 600;
						color: #101010;
					}
	
					.address {
						margin-top: 12rpx;
						font-size: 24rpx;
						// font-weight: 600;
						color: #777E90;
						background: transparent;
	
						text {}
	
						
					}
				}
			}
			.tabs {
				width: 690rpx;
				// height: 180rpx;
				position: absolute;
				left: 50%;
				bottom: 50rpx;
				transform: translateX(-50%);
				box-sizing: border-box;
				padding: 30rpx;
				background-color: #FFF;
				// box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
				border-radius: 20rpx;
				// border: 1rpx solid #F5F5FA;
				.item {
					text-align: center;
					position: relative;
					min-width: 80rpx;
					width: 150rpx;
			
					// border:1px solid #fff;
					.title {
						font-size: 28rpx;
						// font-weight: 600;
						color: #8C8C8C;
					}
			
					&:nth-child(1) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(2) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(3) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(4) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(5) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
				}
			}
		}
	
		
	
		.tabs1 {
			background: red;
			padding: 30rpx;
			background-color: #000000;
	
			.item {
				text-align: center;
				position: relative;
				min-width: 80rpx;
				width: 150rpx;
	
				// border:1px solid #fff;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #8C8C8C;
				}
	
				&:nth-child(1) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}
	
				&:nth-child(2) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}
	
				&:nth-child(3) {
					image {
						width: 38rpx;
						height: 42rpx;
					}
				}
	
				&:nth-child(4) {
					image {
						width: 38rpx;
						height: 10rpx;
					}
				}
			}
		}
	
		.collect {
			// padding: 30rpx;
			// margin-top: 60rpx;
			background: #FFFFFF;
			min-height: 60vh;
	
			.tf-Box-Bg {
				padding: 10rpx 30rpx;
				background: #FFFFFF;
	
				.collect_box {
					display: flex;
					justify-content: space-between;
				}
			}
	
			.collect_title {
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 44rpx;
				margin-bottom: 26rpx;
			}
	
			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
	          
				.title {
					
					font-size: 32rpx;
					font-weight: 600;
					color: #C1C1C1;
	
					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #C1C1C1;
						// margin-right:33rpx;
						display: inline-block;
						width: 110rpx;
						height: 60rpx;
						background: transparent;
						text-align: center;
						line-height: 60rpx;
					}
	
					.active {
						color: #000;
						border-radius: 4px;
						background: #DDD;
						;
					}
				}
	
				.tighr {
					display: flex;
					align-items: center;
				}
	
				.title_right {
					width: 102rpx;
					height: 48rpx;
					margin-left: 10rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #000;
					background: #DDDDDD;
					border-radius: 100px;
				}
	
			}
	
			.title {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				background: #00000000;
				border-radius: 8rpx;
	
				span {
					font-size: 24rpx;
					font-weight: bold;
					color: #c1c1c1;
					display: inline-block;
					width: 110rpx;
					height: 60rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 60rpx;
				}
	
				.active {
					color: #fff;
					background: #898989;
				}
			}
	
	
	
			.box {
				// min-height:100vh;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				// justify-content: space-between;
				align-items: left;
				padding: 10rpx 30rpx;
				width: 100%;
	
				.item {
					width: calc(50% - 45rpx);
					height: 439rpx;
					background: #FFF;
					border-radius: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: left;
					position: relative;
					margin-top: 20rpx;
	                &-shopimg{
						width: 100%;
						height: 100%;
						overflow: hidden;
						image{
							width: calc(50vw - 45rpx);
							height: 323rpx;
						}
					}
					// border: 1px solid #007AFF;
					// image {
					
					// 	background: #FAEBCC;
					// 	border-radius: 30rpx 30rpx 30rpx 30rpx;
					// }
	
					.item_top {
						text-align: left;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 600;
						color: #000;
						padding-left: 33rpx;
						padding-right: 33rpx;
						// line-height: 36rpx;
						margin-top: 16rpx;
					}
	
					.item_bottom {
						text-align: left;
						color: #222;
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						padding-left: 33rpx;
						padding-right: 33rpx;
						margin-top: 17rpx;
					}
				}
	
				.item:nth-child(even) {
					margin-left: 27rpx;
				}
			}
	
			.ts {
				min-width: 90rpx;
				height: 48rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 24rpx;
				opacity: 0.8;
				padding: 0 10rpx;
				position: absolute;
				top: 18rpx;
				left: 16rpx;
				z-index: 1;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}
	
			.add {
				display: flex;
				position: absolute;
				min-width: 40rpx;
				height: 40rpx;
				top: 18rpx;
				right: 16rpx;
				background: rgba(0, 0, 0, 0.3);
				z-index: 1;
				color: #FFFFFF;
				font-size: 28rpx;
				justify-content: center;
				align-items: center;
			}
	
			.tys {
				position: absolute;
				border-radius: 8rpx;
				bottom: 10rpx;
				left: 16rpx;
				display: flex;
				align-items: center;
				z-index: 1;
	
				.txt {
					border-radius: 4rpx;
					width: 60rpx;
					height: 30rpx;
					padding: 5rpx;
					color: #FFF;
					// background: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 10rpx;
					background: #468EFF;
					border-radius: 6rpx;
					backdrop-filter: blur(5rpx);
				}
	
				.txt:nth-child(2n) {
					background: #50E3C2;
					color: #FFF;
				}
			}
		}
	
		::v-deep .u-badge {
			right: 0;
			top: -10rpx;
		}
	
		.btoomm {
			margin: 30rpx auto;
	
			.jszc {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #939393;
				font-size: 32rpx;
	
				image {
					height: 65rpx;
					width: 65rpx;
					margin-right: 10rpx;
				}
			}
	
			.wba {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #939393;
				font-size: 28rpx;
				margin: 30rpx auto;
	
				image {
					height: 35rpx;
					width: 35rpx;
					margin-right: 10rpx;
				}
	
				text {
					color: #939393;
					font-size: 28rpx;
				}
			}
	
			.bah {
				color: #C0C0C0;
				font-size: 26rpx;
				text-align: center;
				margin-top: 20rpx
			}
		}
	
		.morelist {
			height: 80vh;
			overflow: auto;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 26rpx;
	
			.title {
				font-size: 32rpx;
				margin: 20rpx 0;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}
	
			.stop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
	
				.l {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;
	
					.no {
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						border: 2rpx solid #DDDDDD;
						margin-right: 10rpx;
					}
	
					.yes {
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						background: #F2E0BC;
						border: 2rpx solid #F2E0BC;
						margin-right: 10rpx;
					}
				}
	
				.r {
					display: flex;
					justify-content: space-between;
					min-width: 338rpx;
					height: 60rpx;
					background: #F7F7FA;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 34rpx;
					color: #C1C1C1;
					text-align: center;
					line-height: 60rpx;
	
					view {
						width: 164rpx;
					}
	
					.act {
						width: 164rpx;
						color: #333333;
						height: 60rpx;
						background: #DDDDDD;
						border-radius: 8rpx;
					}
				}
			}
	
			.draw-lots-list {
				height: 68vh;
	
			}
	
			.more {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				text-align: center;
			}
	
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F5F5F5;
	
				.left {
					.tt1 {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-right: 10rpx;
					}
	
					.zs {
						min-width: 54rpx;
						height: 28rpx;
						background: #000000;
						border-radius: 4rpx;
						font-size: 20rpx;
						text-align: center;
						font-weight: 600;
						padding: 0 10rpx;
						color: #FFFFFF;
						line-height: 28rpx;
					}
	
					.nzs {
						min-width: 54rpx;
						height: 28rpx;
						padding: 0 10rpx;
						background: #B6B6B6;
						border-radius: 4px;
						text-align: center;
						font-size: 20rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 28rpx;
					}
	
					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
				}
	
				.right {
					position: relative;
					padding-right: 36rpx;
	
					.tt1 {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
						line-height: 28rpx;
						text-align: right;
					}
	
					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
						text-align: right;
					}
	
					.lr {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 24rpx;
						width: 14rpx;
					}
				}
			}
		}
	}
	
	.collect-list{
		height: calc(100vh - 460rpx);
		width: 100vw;
		overflow-y: auto;
		background-color: #fff;
		.cont{
			// padding: 0 0 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			// justify-content:space-evenly;
			&-list{
				margin-top: 40rpx;
				width: calc(50vw - 45rpx);
				margin-left: 30rpx;
				// height: 400rpx;
				// background-color: red;
				&-shopImg{
					width: 100%;
					position: relative;
					.hecheng{
						position: absolute;
						width: 120rpx;
						height: 44rpx;
						background-image: url(@/static/images/info/hecheng.png);
						background-size: 100% 100%;
						top: 0;
						right: 0;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						text{
							margin-left: 36rpx;
							
						}
					}
				}
				&-shopInfo{
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-name{
						width: 60%;
						overflow: hidden;				
	                    text-overflow:ellipsis;
						white-space:nowrap;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #16172F;
					}
					&-price{
						display: flex;
						align-items: center;
						text:nth-child(1){
							font-size: 20rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
						text:nth-child(2){
							font-size: 30rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
					}
				}
				// margin-left:15rpx;
			    &-status{
					&-hecheng{
						text{
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #468EFF;
						}
					}
					&-num{
						display: flex;
						align-items: center;
						text:nth-child(1){
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
						}
						.boder{
							margin: 0 12rpx;
							width: 1rpx;
							height: 18rpx;
							background: #A1A1AB;
							border-radius: 2px;
						    margin-top: 6rpx;
						}
						text:nth-child(3){
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
						}
					}
				}
			}
		}
	}
	::v-deep .u-navbar__content__right{
		padding:0 !important;
	}
</style>
